import { PureComponent } from 'react'
import { Table, Tabs, Button, Switch, Row, Form, Select, Input } from 'antd'
import { connect } from 'react-redux'
// import {
//   getProductCategoryType,
//   getProductCategoryData,
// } from '@/reducer/classify'

// 声明文件放在外部的好处
// 1, 可复用
// 2, 减少当前文件中的代码复杂程度
// import { IClassifyType, IClassifyState, IArgs } from '@/types/classify'

import Header from '@/commponents/common/Layout/Header'

import './style.less'

interface IProps {
  getProductCategoryList: Function // 获取商品列表
  getProductCategoryType: Function // 获取商品状态分类
  [key: string]: any
}
/**
 * 商品列表页
 * 因为当前页面被嵌套在layout容器中，为了避免每次layout中状态变化都重新渲染当前页面，这里使用了PureComponent
 */
class ProductClassify extends PureComponent<IProps, any> {
  // 要在当前类中使用基类中未定义的属性，需要先声明
  // 如果当前类中使用了constructor，也可以在constructor中直接定义
  public oldState: string = JSON.stringify(this.state)
  // state是在Component中声明过的，可以直接定义
  // 组件自身的状态，由IState进行约束，我们必须要让自己的state长得与IState完全一致
  state = {}

  columns = [
    { title: 'ID', dataIndex: 'id' },
    { title: '分类名称', dataIndex: 'cate_name' },
    {
      title: '分类图标',
      dataIndex: 'pic',
      render: (image: any) => (
        <img className="product-image" src={image} alt="" />
      ),
    },
    { title: '排序', dataIndex: 'sort' },
    {
      title: '状态',
      dataIndex: 'is_show',
      render: (_: any, item: any) => (
        <Switch
          checkedChildren="显示"
          unCheckedChildren="隐藏"
          defaultChecked
          onChange={() => {
            // this.props.changeProductShow({
            //   id: item.id,
            //   status: item.is_show === 0 ? 1 : 0,
            // })
          }}
        />
      ),
    },
    {
      title: '操作',
      dataIndex: 'id',
      render: (_: any, item: any) => (
        <>
          <Button type="text">编辑</Button>|<Button type="text">删除</Button>|
        </>
      ),
    },
  ]

  handlerOldState = (state: any) => {
    const stateStr = JSON.stringify(state)
    // 这里使用了一个oldState属性，往上滚动到当前类的顶部看看是怎么定义的
    if (this.oldState !== stateStr) {
      this.oldState = stateStr
      return true
    }
    return false
  }

  render() {
    return (
      <div className="center product product-list">
        <Header title="商品分类"></Header>
      </div>
    )
  }
}

export default connect(
  (state: { productInfo: any }) => state.productInfo,
  {}
)(ProductClassify)
